<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

	
<title>悦章科技机构平台</title>	

	
<!--内容样式-->
<link rel="stylesheet" href="__PUBLIC__/Home/css/style.css" />
<script src="/Public/static/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/Public/static/echarts.js"></script>
	
	
</head>

<body>

	
	<div class="main">
	
	
		<!--  头部  -->

		
		
		
		<!--  左侧导航  -->
		<include file="menu" />
		
		
		
		<!--  右侧内容  -->
		<div class="content">
			
			
			<div class= "ct-title">
				<div class="ctt-bt">内容统计</div>
				<div class="divclear"></div>
			</div>
			
			<div class="sjtj-box">
				<div class="sb-box" style="margin-left: 0;width: calc((100% - 60px) / 3);height:280px;">
					<div class="sbb-top">
						<img src="__PUBLIC__/Home/images/icon_kc1.png" />
						<h4>直播课</h4>
					</div>
					<div class="sbb-sl">
						<h3>{$cumulative}</h3>
						<span>累计开播</span>
					</div>
					<div class="sbb-sl" style="border: none;">
						<h3>{$pre}</h3>
						<span>预计开播</span>
					</div>
					<div class="divclear"></div>
				</div>
				<div class="sb-box" style="width: calc((100% - 60px) / 3);height:280px;">
					<div class="sbb-top">
						<img src="__PUBLIC__/Home/images/icon_kc2.png" />
						<h4>点播课</h4>
					</div>
					<div class="sbb-sl">
						<h3>{$total}</h3>
						<span>总课程数</span>
					</div>
					<div class="sbb-sl" style="border: none;">
						<h3>{$order}</h3>
						<span>总购买数</span>
					</div>
					<div class="divclear"></div>
				</div>
				<div class="sb-box" style="width: calc((100% - 60px) / 3);height:280px;">
					<div class="sbb-top">
						<img src="__PUBLIC__/Home/images/icon_kc3.png" />
						<h4>面授课</h4>
					</div>
					<div class="sbb-sl">
						<h3>{$class}</h3>
						<span>总开课数</span>
					</div>
					<div class="sbb-sl" style="border: none;">
						<h3>{$signup}</h3>
						<span>总报名数</span>
					</div>
					<div class="divclear"></div>
				</div>
				<div class="divclear"></div>
			</div>
			
			
			<div class= "ct-title" style="margin-top: 60px;">
				<div class="ctt-bt">分析图表</div>
				<div class="ctt-r">
					<div class="cttr-tab">
                    <div <if condition="$search eq 1">class="cttrt-btn on"<else/>class="cttrt-btn"</if> onclick="retrieval(1)">今天</div>
                    <div <if condition="$search eq 2">class="cttrt-btn on"<else/>class="cttrt-btn"</if> onclick="retrieval(2)">昨天</div>
                    <div <if condition="$search eq 3">class="cttrt-btn on"<else/>class="cttrt-btn"</if> onclick="retrieval(3)">最近七天</div>
					</div>
					<form class="cttr-bd">
						<select class="cttrb-xl type">
							<option value="1" <if condition="$category eq 1">selected</if>>面授课</option>
							<option value="2" <if condition="$category eq 2">selected</if>>点播课</option>
							<option value="3" <if condition="$category eq 3">selected</if>>直播课</option>
						</select>
	                    <div class="cttrb-sj">
	                        <input type="date" name="start_time" value="{$start_time}">
	                        <img src="__PUBLIC__/Home/images/img_zhi.png" />
	                        <input type="date" name="end_time" value="{$end_time}">
	                        <div class="divclear"></div>
	                    </div>
	                    <a class="cttrb-cx" onclick="query()">查询</a>
	                    <div class="divclear"></div>
					</form>
					<div class="divclear"></div>
				</div>
				<div class="divclear"></div>
			</div>
			
			<div class="tbfx-box">
				<div class="tb-title">趋势数据</div>
	            <div class="tb-tb">
	                <div id="container" style="height: 100%"></div>
	            </div>
			</div>
					
			
			
			
			
		</div>
		
		
		
	</div>
	
	
	
</body>
</html>
<script type="text/javascript">
    function retrieval(search){
    	// var type=$("select['name'=type]:selected").val();
    	var type=$('.type option:selected').val();
    	// alert(search);return false;
        var url="{:U('Home/Operate/contentStatistics')}";
        url=url+"&search="+search+"&category="+type;
        location.href=url;
    }

    function query(){
    	var type=$('.type option:selected').val();
        var start_time = $("input[name='start_time']").val();
        var end_time = $("input[name='end_time']").val();
        var search = 4;
        var url="{:U('Home/Operate/contentStatistics')}";
        url=url+"&start_time="+start_time+"&end_time="+end_time+"&search="+search+"&category="+type;
        location.href=url;
    }
</script>
<script type="text/javascript">
	var chartDom = document.getElementById('container');
	var myChart = echarts.init(chartDom);
	var category="{$category}";
    var line_time = "{$line_time}";//日期
    line_time = line_time.split(',');
    var red = "{$red}";
    red = red.split(',');
    var grey = "{$grey}";
    grey = grey.split(',');
	var option;
	if(category==1){
		//面授
		option = {
		    title: {
		        text: '折线图堆叠'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data: ['面授总课程', '报名数']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: line_time
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name: '面授总课程',
		            type: 'line',
		            stack: '总量',
		            data: grey
		        },
		        {
		            name: '报名数',
		            type: 'line',
		            stack: '总量',
		            data: red
		        }

		    ]
		};
	}else if(category==2){
		//点播
		option = {
		    title: {
		        text: '折线图堆叠'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data: ['点播总课程', '购买数']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: line_time
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name: '点播总课程',
		            type: 'line',
		            stack: '总量',
		            data: grey
		        },
		        {
		            name: '购买数',
		            type: 'line',
		            stack: '总量',
		            data: red
		        }

		    ]
		};
	}else{
		//直播
		option = {
		    title: {
		        text: '折线图堆叠'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data: ['累计开播', '预计开播']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: line_time
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name: '累计开播',
		            type: 'line',
		            stack: '总量',
		            data: grey
		        },
		        {
		            name: '预计开播',
		            type: 'line',
		            stack: '总量',
		            data: red
		        }

		    ]
		};
	}

	    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>